<template>
  <div class="composite-title">
    <div class="title">
      <VHtml
        tag="h3"
        class="title-content"
        :html="question.QuestionContent"
      />
    </div>
    <div class="text-title">
      填写答案：
    </div>
    <div class="text-area-div">
      <ul
        class="block-option-list"
      >
        <li
          v-for="(option, optionIndex) in question.OptionList"
          :key="option.OptionId"
          class="option"
        >
          <van-field
            v-model="textarea[optionIndex]"
            rows="3"
            class="text-area"
            type="textarea"
            maxlength="400"
            :readonly="showAnswer"
            :placeholder="'填空' + (optionIndex + 1) + '的答案'"
            @blur="onTextareaInput(optionIndex, option.OptionContent)"
          />
        </li>
      </ul>
    </div>
    <AnswerAndAnalysis
      v-if="showAnswer"
      :question="question"
      :abcd-answer="ABCDAnswer"
    />
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { isiOS } from '@/lib/utils'
import { AppInfo } from '@/lib/appMethods'
import { SET_QUESTION } from '@/store/mutations'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
    // eslint-disable-next-line vue/no-unused-components
    AnswerAndAnalysis: () => import('components/Exam/AnswerAndAnalysis.vue'),
  },
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    shouldShowAnswer: {
      type: Boolean,
      default: false,
    },
    swiperIndex: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      textarea: [] as any[],
      isAnswerShow: false,
    }
  },
  computed: {
    showAnswer (): boolean {
      // eslint-disable-next-line eqeqeq
      return this.shouldShowAnswer || this.isAnswerShow
    },
    ABCDAnswer (): string {
      if (this.question.UserAnswer.length === 0) {
        return ''
      }
      return this.question.UserAnswer.map((item: any) => {
        if (item === '') {
          return '本空未作答'
        }
        return item
      }).join('；')
    },
    matchRightCount (): number {
      return this.textarea.reduce((count:number, ans:any, index:number) => {
        if (!ans) {
          return count
        }
        const match = this.question.OptionList[index].OptionContent.split('|||').includes(ans)
        return match ? count + 1 : count
      }, 0)
    },
  },
  beforeUpdate () {
    this.onInit()
  },
  created () {
    this.onInit()
  },
  methods: {
    onInit () {
      let hasAnswer = false
      this.question.UserAnswer && (hasAnswer = true)
      this.isAnswerShow = this.shouldShowAnswer && hasAnswer
      this.$set(this.$data, 'textarea', this.question.UserAnswer)
    },

    onTextareaInput (optionIndex: number, optionContent: string) {
      // 0.未做，1.正确，2.错误
      let isRight = 0
      let rightCount = this.matchRightCount
      let emptyCount = 0
      let optionLength = this.question.OptionList.length
      // 填空题多个空，全对才按对
      // 判断当前输入的空是否正确
      for (let i = 0; i < this.question.OptionList.length; i++) {
        if (i < this.textarea.length) {
          if (this.textarea[i] === '' || this.textarea[i] === undefined) {
            emptyCount += 1
            this.textarea[i] = ''
          }
        } else {
          emptyCount += 1
          this.textarea[i] = ''
        }
      }

      this.$store.commit(SET_QUESTION, {
        index: this.swiperIndex,
        question: {
          QuestionId: this.question.QuestionId,
          IsRight: emptyCount === optionLength ? 0
            : (rightCount === optionLength ? 1 : 2),
          UserAnswer: emptyCount === optionLength ? [] : this.textarea,
          RightCountForFillBlank: rightCount,
        },
      })

      if (this.shouldShowAnswer) {
        this.isAnswerShow = true
      }

      this.$emit('stateChange', {
        UserAnswer: this.textarea,
        IsRight: isRight,
        /**
         * 1: 错题、收藏等显示答案状态
         * 2: 其他状态显示答案状态
         */
        showAnswer: this.shouldShowAnswer ? 1 : 0,
      })
      // 解决iOS键盘收起以后页面不归位的问题
      setTimeout(() => {
        let scrollHeight = document.documentElement!.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, Math.max(scrollHeight - 1, 0))
      }, 100)
    },
  },
})
</script>

<style lang="scss" scoped>
.composite-title {
  margin: 30px 40px 0;
  font-size: 30px;
}

.text-title {
    margin-top: 50px;
    font-size: 30px;
}

.text-area-div {
  margin-top: 20px;
}

.text-area{
    margin-top: 20px;
    font-size: 30px;
    padding: 10px;
    width: 100%;
    border: 1px solid #999;
    height: 2.5rem;
    border-radius: 6px;
}

.text-area textarea::-webkit-input-placeholder {
    color: #9E9E9E;
}

.block-option-list {
  margin: 20px 0 60px;
  .option + .option {
    margin-top: 50px;
  }
}

.right-answer {
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 22px;
    background: url('~assets/exam/right-img.png') no-repeat;
    background-size: 24px 16px;
    width: 24px;
    height: 16px;
  }
}
.error-answer {
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20px;
    background: url('~assets/exam/error-img.png') no-repeat;
    background-size: 20px 19px;
    width: 20px;
    height: 19px;
  }
}

</style>
